<template>
  <div class="strength-container">
    <div class="left-panel">
      <div class="drawer-head">
        <span>实力模块</span>
      </div>
      <div class="panel-tree">
        <el-tree ref="zzjgTree" node-key="id" :data="treeData" :props="defaultProps" default-expand-all
          :draggable="true" :highlight-current="true" :allow-drop="allowDrop" :allow-drag="allowDrag"
          @node-click="zzjgTreeClick">
          <span :id="data.id" class="custom-tree-node" slot-scope="{ node, data }" @dragover.prevent
            @drop="handleTreeDrop">
            <div style="display: flex;align-items: center;">
              <img :src="require(`@/assets/image/bdjg/${data.icon}.png`)" style="width: 20px;height: 22px;" alt="">
              <span>{{ data.label }}</span>
            </div>
            <div>
              <el-button class="el-icon-edit-outline" type="text" size="mini" style="font-size: 18px;color: #333;"></el-button>
            </div>
          </span>
        </el-tree>
      </div>
      <div style="height: 300px;">
        <div class="drawer-head">
          <span>基础模块</span>
        </div>
        <div class="zzjg-icons">
          <div v-for="(item, index) in zzjgIcons" :key="index" class="zzjg-item" draggable="true"
            @dragstart="handleDragZzjg($event, item)">
            <img :src="require(`@/assets/image/bdjg/${item.icon}.png`)" style="width: 30px;height: 30px;" alt="">
            <!-- <span>{{ item.name }}</span> -->
          </div>
        </div>
      </div>
    </div>
<!--    <el-button type="primary" @click="openDrawer" class="config-btn floating-btn"> 基础模块</el-button>-->
    <div class="right-panel">
      <!-- 上部分：组织机构 -->
      <div class="org-section">
        <div class="section-head">
          <span>实力结构</span>
        </div>
        <div class="org-content" id="graphContainer">
          <!-- 这里添加组织机构的具体内容 -->
        </div>
      </div>
      <!-- 下部分：作战实力 -->
      <div class="combat-section">
        <div class="section-head">
          <span>作战实力</span>
        </div>
        <div class="combat-content" @dragover.prevent @drop="handleDrop">
          <!-- 这里添加作战实力的具体内容 -->
          <!-- <div class="drop-container" @dragover.prevent @drop="handleDrop"></div> -->
          <!-- 人员区块 -->
          <vue-draggable-resizable class="attribute-block" :w="700" :h="228" :parent="true"
            :debug="false" :min-width="200" :min-height="228" :x="personnelBlock.x" :y="personnelBlock.y"
            :draggable="true" :resizable="true" :isConflictCheck="false" :snap="true" :snapTolerance="10"
            @refLineParams="getRefLineParams" :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']"
            @dragging="onDrag" @resizing="onResize">
            <div class="block-title">
              <span>人员类别</span>
            </div>
            <div class="block-content">
              <div v-for="(item, index) in personnelBlock.items" :key="'dropped-personnel-' + index"
                class="dropped-item" @mouseenter="() => showTool = item" @mouseleave="() => showTool = null">
                <!-- <i class="el-icon-circle-close" style="position: absolute;right: -17px;top: -12px;font-size: 25px;color: #e32935;"></i> -->
                <!-- <i :class="item.icon"></i> -->
                <!-- <div class="" style="width: 70px; height: calc(100% - 50px);"> -->
                <div class="" style="width: 70px; height: 128px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/25.png')"
                    fit="fill"></el-image>
                </div>
                <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">{{ item.name }}</div>
                <div v-if="showTool && showTool.id === item.id" class="hoverTool">
                  <div style="line-height: 50px;">编辑</div>
                  <div style="line-height: 50px; color:#F56C6C;">移除</div>
                </div>
              </div>
            </div>
          </vue-draggable-resizable>

          <!-- 装备区块 -->
          <!-- <template v-for="(item, index) in equipmentBlock.items"> </template> -->
          <vue-draggable-resizable v-if="equipmentBlock.show" :w="700" :h="228" :parent="true" :draggable="true"
            :resizable="true" :min-width="400" :min-height="228" :x="20" :y="20" :isConflictCheck="false" :snap="true"
            :snapTolerance="10" @refLineParams="getRefLineParams"
            :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']" class="attribute-block" @dragging="onDrag"
            @resizing="onResize">
            <div class="block-title">
              <span>武器装备</span>
              <!-- <i class="el-icon-delete" style="margin-left: 10px;cursor: pointer;"></i> -->
            </div>
            <div class="block-content">
              <div v-for="(item, index) in equipmentBlock.items" :key="'dropped-equipment-'+index" class="dropped-item"
                @mouseenter="() => showTool = item" @mouseleave="() => showTool = null">
                <!-- <i class="el-icon-circle-close" style="position: absolute;right: -17px;top: -12px;font-size: 25px;color: #e32935;"></i> -->
                <div class="" style="width: 187px; height: 128px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/步战车.png')"
                    fit="fill"></el-image>
                </div>
                <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">
                  <span>{{item.name}} X </span>
                  <span style="font-size: 25px;color: rgb(57 0 255);font-weight: 700;">{{ item.count }}</span>
                  <span>(辆)</span>
                </div>
                <div v-if="showTool && showTool.name === item.name" class="hoverTool">
                  <div style="line-height: 50px;" @click="clickWqzbFill(item)">信息录入</div>
                  <div style="line-height: 50px; color:#F56C6C;">移除</div>
                </div>
              </div>
              <!-- <div v-for="(peo, pInd) in item.peoples" class="dropped-people">
              <div class="" style="width: 70px; height: 178px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/25.png')" fit="fill"></el-image>
                </div>
              <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">{{peo.name || `席位${pInd+1}`}}</div>
            </div> -->
            </div>
          </vue-draggable-resizable>

          <!-- 设施区块 -->
          <vue-draggable-resizable v-if="facilityBlock.show" :w="300" :h="200" :parent="true" :draggable="true"
            :resizable="true" :min-width="200" :min-height="150" :x="0" :y="0" :isConflictCheck="false" :snap="true"
            :snapTolerance="10" @refLineParams="getRefLineParams"
            :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']" class="attribute-block" @dragging="onDrag"
            @resizing="onResize">
            <div class="block-title">
              <i class="el-icon-office-building"></i>
              <span>设施</span>
            </div>
            <div class="block-content">
              <div v-for="(item, index) in facilityBlock.items" :key="'dropped-facility-'+index" class="dropped-item">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </div>
            </div>
          </vue-draggable-resizable>
          <!--辅助线-->
          <span class="ref-line v-line" v-for="item in vLine" v-show="item.display"
            :style="{ left: item.position, top: item.origin, height: item.lineLength}" />
          <span class="ref-line h-line" v-for="item in hLine" v-show="item.display"
            :style="{ top: item.position, left: item.origin, width: item.lineLength}" />
          <!--辅助线END-->
        </div>
      </div>
    </div>
    <!-- 基础模块弹框 -->
<!--    <vxe-modal v-model="drawerVisible" title="基础模块" :width="370" height="85%" :position="{ left: 'calc(100% - 420px)' }"-->
<!--               :margin-size="-200" :mask="false" :resize="true" :drag="true" :show-zoom="true" :transfer="true"-->
<!--               class="attribute-modal">-->
    <div class="attribute-right">
      <div class="drawer-content">
        <div class="drawer-head" style="margin: 0px 10px 0;">
          <span>基础模块</span>
        </div>
        <!-- 属性面板 -->
        <div class="drawer-attributes">
          <!-- 人员属性 -->
          <div class="attribute-section">
            <div class="section-title">人员</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
              <div v-for="(item, index) in personnelList" :key="'personnel-' + index" class="attribute-item" :title="item.name"
                draggable="true" @dragstart="handleDragStart($event, 'personnel', item)">
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 装备属性 -->
          <div class="attribute-section">
            <div class="section-title">装备</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));">
              <div v-for="(item, index) in equipmentList" :key="'equipment-' + index" class="attribute-item"
                style="flex-direction: column;" draggable="true" :title="item.name"
                @dragstart="handleDragStart($event, 'equipment', item)">
                <div style="width: 75px; height: 55px;">
                  <el-image :src="require('@/assets/image/步战车.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 设施属性 -->
          <div class="attribute-section">
            <div class="section-title">设施</div>
            <div class="attribute-items">
              <div style="margin-left: 10px">暂无数据</div>
<!--              <div v-for="(item, index) in facilityList" :key="'facility-' + index" class="attribute-item"-->
<!--                   draggable="true" @dragstart="handleDragStart($event, 'facility', item)">-->
<!--                <i :class="item.icon"></i>-->
<!--                <span class="attribute-name">{{ item.name }}</span>-->
<!--              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 装备录入 -->
    <vxe-modal v-model="infoFomrVisible" title="静态属信录入" width="80%" height="85%" :mask="true" :resize="true"
      :drag="true" :show-zoom="true" :transfer="true" showFooter class="attribute-modal">
      <template #default>
        <vxe-form title-colon ref="formRef" title-align="right" title-width="100" :data="{}" >

          <vxe-form-item title="xxxx" field="sex" span="8" :item-render="{}" title-overflow>
            <template #default="params">
              <vxe-select v-model="params.sex" placeholder="" clearable >
                <vxe-option value="1" label="111"></vxe-option>
                <vxe-option value="2" label="111"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="xxxxx" field="age" span="8" :item-render="{}" title-overflow="title">
            <template #default="params">
              <vxe-input v-model="params.age" type="" placeholder="" clearable
                ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="xxxxx" field="age" span="8" :item-render="{}" title-overflow="title">
            <template #default="params">
              <vxe-input v-model="params.age" type="" placeholder="" clearable
                ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="xxxxx" field="age" span="8" :item-render="{}" title-overflow="title">
            <template #default="params">
              <vxe-input v-model="params.age" type="" placeholder="" clearable
                ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="xxxxx" field="age" span="8" :item-render="{}" title-overflow="title">
            <template #default="params">
              <vxe-input v-model="params.age" type="" placeholder="" clearable
                ></vxe-input>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import { DagreLayout } from '@antv/layout'
// import { Selection } from '@antv/x6-plugin-selection'
import { convertData, processNode } from './utils.js'
export default {
  name: 'ZzStrength',
  data() {
    return {
      infoFomrVisible: false,
      showTool: null,
      treeData: [
        { id: '01', label: '营', icon: '营',
        children: [
          { id: '0101', label: '连', icon: '连',
            children: [
            { id: '010101', label: '排', icon: '排', },
            { id: '010102', label: '排', icon: '排', },
            { id: '010103', label: '排' ,icon: '排', }
          ]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      zzjgTreeNode: null,
      // 在这里定义需要的数据
      drawerVisible: false,  // 抽屉显示状态
      zzjgIcons: [
        // {id:'1', name: '军', icon: '军', level: 1 },
        // {id:'2', name: '旅', icon: '旅', level: 2 },
        {id:'3', name: '营', icon: '营', level: 3 },
        {id:'4', name: '连', icon: '连', level: 4 },
        {id:'5', name: '排', icon: '排', level: 5 },
        {id:'6', name: '班', icon: '班', level: 6 },
      ],
      // 人员列表
      personnelList: [
        { name: '营长', icon: 'el-icon-user' },
        { name: '副营长', icon: 'el-icon-user-solid' },
        { name: '连长', icon: 'el-icon-user' },
        { name: '副连长', icon: 'el-icon-user-solid' },
        { name: '排长', icon: 'el-icon-user' },
        { name: '班长', icon: 'el-icon-user-solid' },
        { name: '炮手', icon: 'el-icon-user-solid' },
        { name: '士兵', icon: 'el-icon-user-solid' },
        { name: '参谋', icon: 'el-icon-user-solid' },
      ],
      // 装备列表
      equipmentList: [
        { name: '05式指挥车',},
        { name: '05式步战车', },
        { name: '05式突击车', },
        { name: '05式抢修车', },
        { name: '120迫榴车',},
      ],
      // 设施列表
      facilityList: [
        { name: '设施1', icon: 'el-icon-office-building' },
        { name: '设施2', icon: 'el-icon-school' }
      ],
      // 拖拽后的数据块
      personnelBlock: {
        show: false,
        x: 20,
        y: 20,
        w: 0,
        h: 0,
        items: []
      },
      equipmentBlock: {
        show: false,
        items: []
      },
      facilityBlock: {
        show: false,
        items: []
      },
      vLine: [],
      hLine: [],
      graph: null,
      currentHighlight: null // 存储当前高亮节点
    }
  },
  created() {
    this.getZzjgTree();

  },
  mounted() {
    this.initGraph();
  },
  beforeDestroy() {
  if (this.graph) this.graph.dispose()
},
  methods: {
    getZzjgTree() {
      let data = this.treeData[0];
      console.log(data);
      this.$nextTick(() => {
        this.$refs.zzjgTree.setCurrentKey(data.id || null);
      })
    },
    initGraph() {
      // 转换数据
      const result = convertData(this.treeData);
      // console.log(result);

      this.graph = new Graph({
        container: document.getElementById('graphContainer'),
        // selecting: {
        //   enabled: true,
        //   className: 'my-selecting',
        // },
        background: {
          color: '#ffffff', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        panning: {
          enabled: true,
          // eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
        },
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false,
        },
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta'],
        },
      });
      // console.log(result);
      const dagreLayout = new DagreLayout({
        type: 'dagre',
        rankdir: 'TB',
        // align: 'UL',
        ranksep: 15,
        nodesep: 30,
        controlPoints: true,
      })
      let data = {
        // shape: 'edge',
        ...result
      }
      const newModel = dagreLayout.layout(data)
      this.graph.fromJSON(newModel)
      // this.graph.zoomToFit({maxScale:1});
      this.graph.zoom(-0.2);
      this.graph.centerContent();
      // 绑定点击事件
      this.graph.on('cell:click', this.handleNodeClick);



    },
    // 节点点击处理
    handleNodeClick({ node }) {
      console.log(node);
      this.graph.startBatch('highlight')
      // 执行样式修改操作
      if (this.currentHighlight?.id === node.id) {
        // 重复点击已高亮节点：取消高亮
        this.resetHighlight()
        this.graph.stopBatch('highlight')
      } else {
        // 点击新节点：先重置旧高亮，再设置新高亮
        this.resetHighlight()
        this.setHighlight(node)
        this.graph.stopBatch('highlight')
      }
    },

    // 设置高亮
    setHighlight(node) {
      node.attr('body', {
        fill: '#FFC107',     // 高亮填充色
        stroke: '#FF9800',   // 高亮边框
        strokeWidth: 2
      })
      this.currentHighlight = node // 存储引用
    },

    // 重置高亮
    resetHighlight() {
      if (this.currentHighlight) {
        this.currentHighlight.attr('body', {
          fill: '#ffffff',   // 默认填充色
          stroke: '#333',    // 默认边框
          strokeWidth: 1
        })
        this.currentHighlight = null
      }
    },
    zzjgTreeClick(data){
      const cellView = this.graph.getCellById(data.id);
      console.log(cellView);
      this.handleNodeClick({node:cellView});
    },
    clickWqzbFill(obj){
      this.infoFomrVisible = true;
    },
    // 在这里定义需要的方法
    // 拖拽开始事件
    handleDragStart(event, type, item) {
      event.dataTransfer.setData('type', type)
      event.dataTransfer.setData('item', JSON.stringify({...item, count: 1}))
    },
    // 拖拽放置事件
    handleDrop(event) {
      const type = event.dataTransfer.getData('type')
      const item = JSON.parse(event.dataTransfer.getData('item'))

      switch (type) {
        case 'personnel':
          this.personnelBlock.show = true
          this.personnelBlock.items.push({id: new Date().getTime() , ...item})
          break
        case 'equipment':
          this.equipmentBlock.show = true
          // this.equipmentBlock.items.push(item)
          let index = this.equipmentBlock.items.findIndex(fi => fi.name === item.name)
          if (index !== -1) {
            this.equipmentBlock.items[index].count++;
            console.log(this.equipmentBlock.items[index]);
          }else{
            this.equipmentBlock.items.push(item)
          }
          console.log(this.equipmentBlock);
          break
        case 'facility':
          this.facilityBlock.show = true
          this.facilityBlock.items.push(item)
          break
      }
    },
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    },
    // 添加打开抽屉的方法
    openDrawer() {
      this.drawerVisible = true
    },
    // 修改拖拽和缩放的处理方法
    onDrag(x, y) {
      console.log('拖拽位置:', x, y)
    },
    onResize(x, y, width, height) {
      console.log('调整大小:', width, height)
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'))
      })
    },
    handleDragZzjg(event, item) {
      // 设置拖拽数据
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('application/json', JSON.stringify(item))
    },
    allowDrop(draggingNode, dropNode, type) {
      return true // 允许拖拽到任何节点
    },
    allowDrag() {
      return true // 允许任何节点被拖拽
    },
    handleTreeDrop(event) {
      console.log(event);
      event.preventDefault()
      try {
        // 尝试从两种可能的格式获取数据
        const item = JSON.parse(event.dataTransfer.getData('application/json') || event.dataTransfer.getData('item'))
        // const targetNode = event.target.closest('.el-tree-node')
        const targetNode = event.currentTarget;
        if (!targetNode) return
        // console.log(targetNode);

        let node = this.$refs.zzjgTree.getNode(targetNode.id || null)
        // console.log(node);
        if (!node) return false;
        const targetData = node;
        const targetLevel = this.getNodeLevel(targetData)

        // 验证层级关系
        if (item.level <= targetLevel) {
          this.$message.warning('不能将高级别单位拖拽到低级别单位下')
          return
        }

        // 创建新节点
        const newNode = {
          label: item.name,
          icon: item.icon,
          children: [],
          id: new Date().getTime().toString()
        }

        let obj = this.findNodeBFS(this.treeData, targetNode.id);
        if (obj.children) {
          obj.children.push(newNode);
        } else {
          obj.children = [newNode];
        }
        this.$nextTick(() => {
          this.$refs.zzjgTree.append(newNode, obj);
          node.expanded = true;
        })

        console.log(node, obj);
        console.log(this.treeData);

        // 添加到目标节点的children中
        // if (!targetData.children) {
        //   this.$set(targetData, 'children', [])
        // }
        // targetData.children.push(newNode)
      } catch (error) {
        console.error('Drop handling error:', error)
      }
    },
    findNodeBFS(treeArray, targetId) {
      const queue = [...treeArray]; // 初始化队列
      while (queue.length > 0) {
        const node = queue.shift(); // 取出队列头部节点
        if (node.id === targetId) return node;
        // 将子节点加入队列尾部
        if (node.children?.length) {
          queue.push(...node.children);
        }
      }
      return null; // 未找到
    },
    getNodeLevel(node) {
      let level = 0
      let current = node
      while (current.parent) {
        level++
        current = current.parent
      }
      return level
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.vxe-modal--wrapper{
  width: 0 !important;
  height: 0 !important;
}
::v-deep.vxe-modal--wrapper.is--mask:before,
::v-deep.vxe-modal--wrapper.lock--view:before{
  content: none;
}
::v-deep .x6-graph-background{
  background:rgb(255 255 255 / 52%) !important;
}
::v-deep .vdr{
  //border: 1px dashed #d0dee7;
  border: 1px solid #0a5387;
  background: #fff;
}
.strength-container {
  display: flex;
  height: 100%;
  padding: 10px;

  .left-panel {
    width: 300px;
    padding: 0px 8px 10px;
    height: 100%;
    background: #fff;
    background: url("../../assets/image/left-box.png") no-repeat;
    background-size: 100% 100%;
    //border-radius: 4px;
    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-right: 10px;

    .zzjg-icons {
      display: flex;
      flex-wrap: wrap;
      padding: 8px;

      .zzjg-item {
        width: 30px;
        height: 30px;
        margin-right: 15px;
        cursor: all-scroll;

        &:hover {
          //transform: scale(1.1);
        }
      }
    }
  }
  .panel-tree{
    height: calc(100% - 330px);
    margin-top: 10px;
    .custom-tree-node{
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333;
      span{
        margin-left: 5px;
      }
    }
    ::v-deep .el-tree-node__content{
      height: 30px;
    }
  }
  .right-panel {
    flex: 1;
    width: calc(100% - 620px);
    position: relative;
  }
}

.org-section {
  height: calc(30% - 10px);
  margin-bottom: 10px;
  border: 1px solid #0a5387;
  background-color: rgb(255 255 255 / 83%);
}
.combat-section {
  height: calc(70% - 0px);
  background: url("../../assets/image/zj-box.png") no-repeat;
  background-size: 100% 100%;
}
.org-section,
.combat-section {
  //border-radius: 2px;
  //padding: 8px;
  //border: 1px solid #042034;

  .section-head{
    height: 35px;
    background: url("../../assets/image/z-bt.png") no-repeat;
    background-size: 100% 24px;
    color: #0c4988;
    background-position-y: 12px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 5px;
  }
}

.org-section h2,
.combat-section h2 {
  padding: 0 8px 8px 8px;
  margin: 0;
  border-bottom: 2px solid #1890ff;
  color: #333;
}
.org-content,
.combat-content {
  /* min-height: 200px; */
  height: calc(100% - 35px);
  position: relative;
}
.attribute-block {
        // position: relative;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
        // overflow: hidden;
        // position: absolute;

        // 修改 vue-draggable-resizable 默认样式
        :deep(.vdr) {
          border: 1px solid #ebeef5;
          border-radius: 6px;

          &.active {
            border-color: #409eff;
          }
        }

        :deep(.vdr-handle) {
          background-color: #409eff;
          border: 1px solid #fff;
          width: 8px;
          height: 8px;
          border-radius: 4px;

          &:hover {
            transform: scale(1.2);
          }
        }

        .block-title {
          display: flex;
          align-items: center;
          padding: 2px 5px;
          background: #f5f7fa;
          // border-bottom: 1px solid #ebeef5;
          cursor: move;
          position: absolute;
          top: -13px;
          left: 15px;
          border-radius: 2px;
          // position: sticky;
          // top: 0;
          // z-index: 1;

          i {
            font-size: 18px;
            margin-right: 8px;
            color: #409eff;
          }

          span {
            font-weight: bold;
            color: #303133;
          }
        }

        .block-content {
          padding: 15px;
          height: calc(100% - 0px);
          overflow-y: auto;
          margin-top: 0px;
          // display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 12px;
          //background: #fff;
          display: flex;

          .dropped-people,
          .dropped-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            background: #f5f7fa;
            border-radius: 4px;
            transition: all 0.3s;
            // height: 240px;

            &:hover {
              // background: #ecf5ff;
              // transform: translateY(-2px);
            }

            i {
              font-size: 18px;
              margin-right: 8px;
              color: #409eff;
            }

            span {
              color: #606266;
            }
          }
          .hoverTool{
            position: absolute;
            width: 99%;
            height: 99%;
            background-color: rgb(0 0 0 / 66%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
          }
          .dropped-people{
            // width: 60px;
          }
        }
      }


.attribute-right{
  background: url("../../assets/image/r-box.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
}

.drawer-head{
  height: 35px;
  background: url("../../assets/image/min-title.png") no-repeat;
  background-size: 100% 24px;
  color: #0c4988;
  background-position-y: 12px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 16px;
  font-weight: bold;
  //margin: 5px 10px 0px;
}

.attribute-right,
.attribute-modal {

  :deep(.vxe-modal--box) {
    border-radius: 4px;
    overflow: hidden;
  }

  :deep(.vxe-modal--header) {
    background-color: #f5f7fa;
    padding: 12px 15px;
  }

  :deep(.vxe-modal--body) {
    padding: 0;
  }

  .drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-attributes {
      flex: 1;
      height: calc(100% - 35px);
      width: 350px;
      overflow-y: auto;
      padding: 5px;
    }
  }
}

/* 属性面板样式 */
.drawer-attributes {
  .attribute-section {
    margin-bottom: 0px;

    .section-title {
      font-size: 15px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 0px;
    }

    .attribute-items {
      display: grid;
      // grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
      gap: 10px;
      padding: 5px;

      .attribute-item {
        //display: flex;
        //align-items: center;
        //justify-content: space-around;
        //padding: 5px 10px 0;
        margin: 0 auto;
        background: #eef2f8;
        border: 1px solid #c9d5e1;
        border-radius: 2px;
        cursor: move;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          border-color: #409eff;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        .attribute-name{
          color: #16314b;
          font-size: 14px;
          text-align: center;
          padding: 2px 0px;
          background-color: #d7dee3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

/* 悬浮按钮样式 */
.floating-btn {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  padding: 10px 15px;
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  writing-mode: vertical-lr;
  letter-spacing: 2px;
}

.my-selecting{
  background-color: red;
  border: 2px solid red;
}
</style>
